<script setup>
import {onMounted, ref} from "vue";
import {getArchiveArticleList} from "@/api/archive.js";
import dateUtil from "../../../utils/dateUtil.js";
import {useRouter} from "vue-router";

const $router = useRouter();

const archiveList = ref([]);

onMounted(async () => {
  await findArchiveTimeline();
});

const loading = ref(false);
const findArchiveTimeline = async () => {
  loading.value = true;
  await getArchiveArticleList().then(res => {
    archiveList.value = res.data;
    const timer = setTimeout(() => {
      loading.value = false;
      clearTimeout(timer);
    }, 500);
  }).catch(err => {
    console.log(err);
  });
};
const readArticle = (postId) => {
  if (!postId) return;
  $router.push({path: `/article/read/${postId}`});
};
</script>

<template>
  <div class="v-archive-box" v-loading="loading">
    <div class="v-archive-title">
      文章归档列表
    </div>
    <div class="v-archive-timeline">
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in archiveList" :key="index" type="success" placement="top"
                          color="#409EFF" :timestamp="activity.timestamp">
          <div v-for="(item, index) in activity?.detailList" :key="index" class="v-archive-item">
            <span>{{ dateUtil.formatDate(item?.publishedTime, 'HH:mm') }}</span>
            <span @click="readArticle(item?.postId)">{{ item.title }}</span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<style scoped>
.v-archive-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 30px;
  box-sizing: border-box;
  background-color: #ffff;
  border-radius: 4px;
  
  .v-archive-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  
  .v-archive-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background-color: #409EFF;
    margin-right: 6px;
    border-radius: 8px;
  }
  
  .v-archive-timeline {
    width: 100%;
  }
  
  .v-archive-item {
    display: flex;
    align-items: center;
    margin: 14px 0;
    
    > span:nth-child(1) {
      font-size: 14px;
      color: #999;
      margin-right: 10px;
    }
  }
  
  .v-archive-item:hover {
    cursor: pointer;
    color: #409EFF;
  }
}
</style>